<script setup lang="ts">
import { useIcon } from '@/hooks/web/useIcon'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { CustomButtonProps } from '../types'
import { PropType } from 'vue'

const emit = defineEmits(['search', 'reset', 'expand', 'customButtonClick'])

const { t } = useI18n()

const props = defineProps({
  showSearch: propTypes.bool.def(true),
  showReset: propTypes.bool.def(true),
  showExpand: propTypes.bool.def(false),
  visible: propTypes.bool.def(true),
  searchLoading: propTypes.bool.def(false),
  resetLoading: propTypes.bool.def(false),
  // 自定义按钮配置
  customButtons: {
    type: Array as PropType<CustomButtonProps[]>,
    default: () => []
  }
})

const onSearch = () => {
  emit('search')
}

const onReset = () => {
  emit('reset')
}

const onExpand = () => {
  emit('expand')
}

const onCustomButtonClick = (button: CustomButtonProps, index: number) => {
  emit('customButtonClick', button, index)
  if (button.onClick) {
    button.onClick()
  }
}
</script>

<template>
  <BaseButton
    v-if="showSearch"
    type="primary"
    :loading="searchLoading"
    :icon="useIcon({ icon: 'vi-ep:search' })"
    @click="onSearch"
  >
    {{ t('common.query') }}
  </BaseButton>
  <BaseButton
    v-if="showReset"
    :loading="resetLoading"
    plain
    :icon="useIcon({ icon: 'vi-ep:refresh-right' })"
    @click="onReset"
  >
    {{ t('common.reset') }}
  </BaseButton>

  <!-- 自定义按钮 -->
  <BaseButton
    v-for="(button, index) in customButtons"
    :key="index"
    :type="button.type || 'default'"
    :loading="button.loading"
    :disabled="button.disabled"
    :icon="button.icon ? useIcon({ icon: button.icon }) : undefined"
    :color="button.color"
    :plain="button.plain"
    @click="onCustomButtonClick(button, index)"
  >
    {{ button.label }}
  </BaseButton>

  <BaseButton
    v-if="showExpand"
    :icon="useIcon({ icon: visible ? 'vi-ep:arrow-up' : 'vi-ep:arrow-down' })"
    text
    @click="onExpand"
  >
    {{ t(visible ? 'common.shrink' : 'common.expand') }}
  </BaseButton>
</template>
